<template>
	<view v-if="Object.keys(dataObj).length">
		<view class="module">
			<view class="process" v-if="dataObj.orderTimeline" :style="{'height':isProcess?'auto':'280rpx'}">
				<view class="timeLine">
					<view class="item" v-for="(item,index) in dataObj.orderTimelineList" :key="index">
						<view class="title">
							<view class="dot" v-if="index!=0"></view>
							<view class="dotCheck" v-else></view>
							<text class="title_text">{{item.title}}</text>
							<text class="time">{{item.dateTime}}</text>
						</view>
						<view class="content">
							{{item.msg}}
						</view>
					</view>
				</view>
				<view class="toolBtn" @tap="changeProcess" v-if="dataObj.orderTimelineList.length>2">
					{{isProcess?'收起':'展开'}}
				</view>
			</view>
			<view class="address flex-ac">
				<image class="icon" src="../../static/order/locations.png" mode="widthFix" style="height: auto;">
				</image>
				<view class="info flex1">
					<view class="top flex-ac">
						<text class="name f32 bold">{{dataObj.receiverName}}</text>
						<text class="phone f26 c333">{{dataObj.receiverPhone}}</text>
					</view>
					<view class="address-detail">
						<text class="text c999 f26">{{dataObj.shippingInfo}}</text>
					</view>
				</view>
			</view>
			<view class="product" v-for="(item,index) in dataObj.itemList">
				<view class="product_info">
					<view class="item">
						<view class="title">
							<text>订单信息</text>
						</view>
						<view class="info">
							<view class="mainImg">
								<image :src="item.shoeImg?item.shoeImg.split(',')[0]:'../../static/logo.png'"
									mode="aspectFill"></image>
								<!-- <view class="statusBox">{{dataObj.label}}</view> -->
							</view>
							<view class="middle">
								<text class="title">{{item.title}}</text>
								<!-- <text class="desc">鞋子类型：{{item.shoeTypeName}}</text> -->
								<!-- <text class="desc">服务类型：{{item.title}}</text> -->
							</view>
							<view class="price">
								￥{{$u.priceFixed(item.servicePrice)}}
							</view>
						</view>
					</view>
					<view class="saveBtn" @tap="changeIndex(index)">{{currentIndex==index?'收起更多':'查看更多'}}</view>
				</view>
				<view class="product_moreInfo" v-if="currentIndex==index">
					<view class="title">
						<text>鞋子信息</text>
					</view>
					<!-- <view class="shoe_type" style="border-bottom: 1px solid #D1D1D1;">
						<text class="label">类型</text>
						<text>{{item.shoeTypeName}}</text>
					</view>
					<view class="shoe_type">
						<text class="label">材质</text>
						<text>{{item.shoeMaterialName}}</text>
					</view> -->
					<view class="title" style="margin-top: 20rpx;">
						<text>材质类型</text>
					</view>
					<!-- <view class="serve_type" v-if="item.serviceInfoName">
						<view class="item_type" v-for="(item3,index3) in item.serviceInfoName.split(',')" :key="index3">
							<text class="label">修补</text>
							<text class="gui-icons">&#xe7f8</text>
						</view>
					</view> -->
					<view class="list">
						<view class="item_list" v-for="(item4,index4) in item.serviceItems" :key="index4"
							:style="{'borderColor': '#2B2B2B'}">
							<image class="mainImg" :src="item4.serviceLogo" @error="$u.imgError(item4,'serviceLogo')"
								mode="aspectFill"></image>
							<view class="info">
								<text class="info_title qoverDot2" style="height: 68rpx;">{{item4.serviceName}}</text>
								<view class="info_price">
									<view class="t-price">
										<text class="new_price">
											<text>￥</text>{{$u.priceFixed(item4.originalPrice)}}
										</text>
										<text class="f26">（会员价{{item4.currentPrice}}）</text>
									</view>
									<view class="price">
										<text class="old">洗鞋养护一体化</text>
										<text class="gui-icons checkYes">&#xe7f8;</text>
									</view>
								</view>
								<view v-if="item4.id==9" class="serviceBox">
									<text style="font-size: 26rpx;">共支付：</text>
									<text style="color: red;">￥{{$u.priceFixed(item.servicePrice)}}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 	<view class="title">
						<text>备注信息</text>
					</view>
					<view class="textArea">
						{{item.remark}}
					</view>
					<view class="title">
						<text>鞋子照片</text>
					</view>
					<view class="imgList" v-if="item.shoeImg">
						<view class="item" v-for="(item2,index2) in item.shoeImg.split(',')" :key="index2">
							<image :src="item2" mode="aspectFill" @tap="previewImg(item.shoeImg,index2)"></image>
						</view>
					</view> -->
				</view>
			</view>
			<view v-if="dataObj.orderStatus>=0">
				<view class="title_qishou">骑手揽收信息 <text>*</text> </view>
				<view class="product_moreInfo">
					<view class="title">
						<text>骑手备注</text>
					</view>
					<view class="textArea">
						<textarea v-if="dataObj.orderStatus===0" placeholder="请输入备注信息" v-model="receiveRemark" />
						<text v-else>{{dataObj.receiveRemark}}</text>
					</view>
					<view class="title">
						<text>骑手揽收照片</text>
					</view>
					<view class="imgList" v-if="dataObj.orderStatus===0">
						<gui-upload-images @change="changeImg" :maxFileNumber="20" fileName="file" ref="uploadimgcom1" @uploaded="uploaded"
							:uploadServerUrl="`${$c.baseUrl}/api/common/upload`"></gui-upload-images>
					</view>
					<view class="imgList" v-if="dataObj.orderStatus!==0&&dataObj.receiveImg">
						<view class="item" v-for="(item4,index4) in dataObj.receiveImg.split(',')" :key="index4">
							<image :src="item4" mode="aspectFill" @tap="previewImg(dataObj.receiveImg,index4)"></image>
						</view>
					</view>
					<view class="title">
						<text>绑定标码</text>
					</view>
					<view class="bagModule">
						<view class="bagList" v-if="dataObj.orderStatus===0">
							<view class="item" v-for="(item,index) in bagList" :key="index">
								<text>{{item}}</text>
								<text class="gui-icons" @tap="delBag(index)">&#xe636;</text>
							</view>
						</view>
						<view class="bagList" v-else>
							<view class="item" v-for="(item,index) in bagList" :key="index">
								<text>{{item}}</text>
							</view>
						</view>
						<view class="bagBtnList" v-if="dataObj.orderStatus===0">
							<view class="addBag saveBtn gui-icons" @tap="addBag">&#xe625; 添加标码</view>
							<view class="saveBtn" @tap="bindBag">确认绑定</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="dataObj.orderStatus>=4">
				<view class="title_qishou">骑手配送信息 <text>*</text> </view>
				<view class="product_moreInfo">
					<view class="title">
						<text>骑手备注</text>
					</view>
					<view class="textArea">
						<textarea v-if="dataObj.orderStatus===4" placeholder="请输入备注信息" v-model="deliverRemark" />
						<text v-else>{{dataObj.deliverRemark}}</text>
					</view>
					<view class="title">
						<text>骑手配送照片</text>
					</view>
					<view class="imgList" v-if="dataObj.orderStatus===4">
						<gui-upload-images @change="changeImg" :maxFileNumber="20" fileName="file" ref="uploadimgcom1" @uploaded="uploaded"
							:uploadServerUrl="`${$c.baseUrl}/api/common/upload`"></gui-upload-images>
					</view>
					<view class="imgList" v-if="dataObj.orderStatus!==0&&dataObj.deliverImg">
						<view class="item" v-for="(item4,index5) in dataObj.deliverImg.split(',')" :key="index5">
							<image :src="item4" mode="aspectFill" @tap="previewImg(dataObj.deliverImg,index5)"></image>
						</view>
					</view>
				</view>
			</view>
	<!-- 		<view v-if="dataObj.orderStatus>=1">
				<view class="title_qishou">分拣员填写信息 <text>*</text> </view>
				<view class="product_moreInfo">
					<picker v-if="dataObj.orderStatus==1" mode="selector" :range="placeList" @change="changePlace"
						range-key="dictLabel">
						<view class="fenpei">
							<text>分配工作区域</text>
							<text>{{placeIndex!=-1?placeList[placeIndex].dictLabel:'请选择'}}</text>
						</view>
					</picker>
					<view class="fenpei" @tap="changePlace" v-if="dataObj.orderStatus==1">
						<text>分配工作区域</text>
						<view v-if="!placeCheckList.length">
							<text>请选择</text>
						</view>
						<view v-else>
							<text v-for="(item,index) in placeCheckName">{{item}}</text>
						</view>
					</view>
					<view class="fenpei" v-else>
						<text>分配工作区域</text>
						<view v-if="dataObj.sortWorkName">
							<text v-for="(item,index) in dataObj.sortWorkName.split(',')">{{item}}</text>
						</view>
					</view>
					<view class="title">
						<text>分拣员备注</text>
					</view>
					<view class="textArea">
						<textarea v-if="dataObj.orderStatus==1" placeholder="请输入备注信息" v-model="sortRemark" />
						<text v-else>{{dataObj.sortRemark}}</text>
					</view>
				</view>
			</view> -->
	<!-- 		<view v-if="dataObj.orderStatus>=2">
				<view class="title_qishou">清洗员填写信息 <text>*</text> </view>
				<view class="product_moreInfo">
					<view class="title">
						<text>清洗员备注</text>
					</view>
					<view class="textArea">
						<textarea v-if="dataObj.orderStatus==2" placeholder="请输入备注信息" v-model="cleanRemark" />
						<text v-else>{{dataObj.cleanRemark}}</text>
					</view>
					<view class="title">
						<text>清洗后照片</text>
					</view>
					<view class="imgList" v-if="dataObj.orderStatus==2">
						<gui-upload-images @change="changeImg" fileName="file" ref="uploadimgcom2" @uploaded="uploaded"
							:uploadServerUrl="`${$c.baseUrl}/api/common/upload`"></gui-upload-images>
					</view>
					<view class="imgList" v-if="dataObj.orderStatus!==2&&dataObj.cleanImg">
						<view class="item" v-for="(item5,index5) in dataObj.cleanImg.split(',')" :key="index5">
							<image :src="item5" mode="aspectFill" @tap="previewImg(dataObj.cleanImg,index5)"></image>
						</view>
					</view>
				</view>
			</view> -->
			<view class="sale">
				<view class="title">
					<text>订单信息</text>
				</view>
				<view class="item">
					<text class="lable">订单编号</text>
					<text class="money" style="color: #666;">{{dataObj.orderNo}}</text>
				</view>
				<view class="item">
					<text class="lable">预约上门时间</text>
					<text class="money" style="color: #666;">{{dataObj.doorTime}}</text>
				</view>
				<view class="item">
					<text class="lable">支付方式</text>
					<text class="money" style="color: #666;">{{dataObj.payType==1?'微信':dataObj.payType==2?'余额':'组合支付'}}</text>
				</view>
				<view class="item">
					<text class="lable">支付时间</text>
					<text class="money" style="color: #666;">{{dataObj.paymentTime}}</text>
				</view>
				<view class="item">
					<text class="lable">支付金额</text>
					<text class="money" style="color: #FF4600;">{{dataObj.actualPayment}}元</text>
				</view>
				<view class="item" v-if="dataObj.orderStatus==5">
					<text class="lable">签收时间</text>
					<text class="money" style="color: #666;">{{dataObj.completeTime}}</text>
				</view>
				<view class="title" v-if="dataObj.supplementStatus==2">
					<text>补差价</text>
				</view>
				<view class="item" v-if="dataObj.supplementStatus==2">
					<text class="lable">已补差价</text>
					<text class="money" style="color: #FF4600;">{{$u.priceFixed(dataObj.differencePrice)}}元</text>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<view class="module bottom_tool" style="margin: 0;">
			<text class="titleType">订单状态</text>
			<view class="right" v-if="dataObj.orderStatus==-1">
				<text class="money">用户取消</text>
			</view>
			<view class="right" v-if="dataObj.orderStatus===0">
				<text class="money">未揽收</text>
				<view class="saveBtn" v-if="userInfo.role==1" @tap="recycleNow">揽收</view>
			</view>
			<view class="right" v-if="dataObj.orderStatus==1">
				<text class="money">已揽收</text>
				<!-- <view class="saveBtn" v-if="userInfo.role==2" @tap="sortNow">分拣</view> -->
			</view>
			<view class="right" v-if="dataObj.orderStatus==2">
				<text class="money">清洗中</text>
				<!-- <view class="saveBtn" v-if="userInfo.role==3" @tap="cleanNow">完成清洗</view> -->
			</view>
			<view class="right" v-if="dataObj.orderStatus==3">
				<text class="money">清洗完成</text>
				<view class="saveBtn" v-if="userInfo.role==1" @tap="goToNow">配送</view>
			</view>
			<view class="right" v-if="dataObj.orderStatus==4">
				<text class="money">配送中</text>
				<view class="saveBtn" v-if="userInfo.role==1" @tap="goFinishToNow">完成配送</view>
			</view>
			<view class="right" v-if="dataObj.orderStatus==5">
				<text class="money">订单完成</text>
			</view>
		</view>
		<gui-popup ref="guipopup3" position="bottom" @close="closeNow">
			<view class="gui-relative gui-box-shadow">
				<view class="box-module">
					<view class="btnList">
						<view class="saveBtn cancleBtn" @tap="canclePlace">取消</view>
						<view class="saveBtn" @tap="comfirmPlace">确定</view>
					</view>
					<scroll-view scroll-y="true" class="placeList_scroll">
						<view class="placeList">
							<view class="item" v-for="(item,index) in placeList" :key="index"
								@tap="changePlaceBox(item)">
								<text>{{item.dictLabel}}</text>
								<text class="gui-icons checkYes"
									v-if="placeIds.includes(item.dictValue)">&#xe7f8;</text>
								<text class="gui-icons checkNo" v-else>&#xe7f8;</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- iphone 底部操作按钮躲避 -->
				<gui-iphone-bottom></gui-iphone-bottom>
			</view>
		</gui-popup>
	</view>
</template>

<script>
	import wx from '../../common/jweixin-module-master/lib/index.js';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				sackNum: '', //袋子编码
				orderNo: '', //订单号
				dataObj: [], //详情
				isProcess: false, //是否更多状态
				currentIndex: -1, //鞋子更多
				receiveRemark: '', //骑手备注
				// 记录需要上传的图片数据
				needPploadedImgs: [],
				oIndex: '', //数据下标
				sortRemark: '', //分拣备注
				cleanRemark: '', //清洗备注
				cleanImg: '', //清洗图片
				placeList: [], //工作区域
				placeCheckList: [], //工作区域选中值
				placeCheckName: [], //工作区域选中内容
				placeIds: [], //工作区域选中值 弹窗
				placeNames: [], //工作区域选中内容 弹窗
				bagList: [], //袋子列表
				isScan: false, //是不是扫码进来
				deliverRemark: '',
				deliverImgList: [], //完成图片
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad(options) {
			console.log(options);
			console.log(this.userInfo);
			this.orderNo = options.orderNo ? options.orderNo : ''
			this.sackNum = options.sackNum ? options.sackNum : ''
			this.isScan = options.isScan ? true : false
			this.oIndex = options.oIndex
			this.getDetail()
			this.getCommon()
		},
		methods: {
			copyText(text) {
				this.$u.copyText(text, () => {
					this.$u.msg('复制成功！')
				})
			},
			goPhone(phone) {
				this.$u.showModal('温馨提示', `确认拨打${phone}电话吗？`, (res) => {
					if (res) {
						console.log('用户点击确定');
						this.$u.makePhone(phone)
					}
				})
			},
			
			bindBag() {
				if (!this.bagList.length) {
					this.$u.msg('请先添加标码！')
					return;
				}
				let sackNums = this.bagList.join()
				this.$u.showModal('温馨提示', '确定绑定吗', (res) => {
					if (res) {
						this.$http.post('/api/worker/bind', {
							orderNo: this.orderNo,
							sackNums
						}).then(res => {
							if (res.data.code == 200) {
								console.log(res.data.data)
								this.$u.msg('绑定成功！')
								this.getDetail()
							} else {
								this.$u.msg(res.data.msg)
							}
						})
					}
				})

			},
			addBag() {
				var windowHref = window.location.href;
				//扫码
				this.$http.get('/api/wx/parameter?url=' + encodeURIComponent(window.location.href.split('#')[0])).then(
					res3 => {
						console.log(res3)
						wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: res3.data.data.appid, // 必填，公众号的唯一标识
							timestamp: res3.data.data.timestamp, // 必填，生成签名的时间戳
							nonceStr: res3.data.data.nonceStr, // 必填，生成签名的随机串
							signature: res3.data.data.signature, // 必填，签名
							jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
						});
						wx.ready(() => {
							wx.scanQRCode({
								needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
								scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
								success: (res) => {
									var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
									var pastResult = result.split(',').length > 1 ? result.split(
										',')[1] : result
									this.bagList = []	
									if (this.bagList.includes(pastResult)) {
										this.$u.msg('标码编码已存在！')
									} else {
										this.bagList.push(pastResult);
									}
								}
							});
						});
					})
			},
			delBag(index) {
				this.bagList.splice(index, 1);
				console.log(this.bag)
			},
			recycleNow() {
				// if (!this.receiveRemark) {
				// 	this.$u.msg('请填写备注！')
				// 	return;
				// }
				if (this.needPploadedImgs.length < 1) {
					this.$u.msg('请选择图片')
					return;
				}
				if (!this.bagList.length) {
					this.$u.msg('请先添加标码！')
					return;
				}
				this.$u.showModal('温馨提示', '确认揽收该订单吗？', (res) => {
					if (res) {
						this.$refs.uploadimgcom1.upload();
					}
				})
			},
			sortNow() { //分拣
				if (!this.placeCheckList.length) {
					this.$u.msg('请选择区域！')
					return;
				}
				if (!this.sortRemark) {
					this.$u.msg('请填写备注！')
					return;
				}
				let sortWorkId = this.placeCheckList.join()
				let sortWorkName = this.placeCheckName.join()
				this.$u.showModal('温馨提示', '确认订单分拣完成吗？', (res) => {
					if (res) {
						this.$http.post('/api/worker/sort', {
							orderNo: this.orderNo, //订单编号
							sortRemark: this.sortRemark, //分拣备注
							sortWorkId, //分拣id
							sortWorkName
						}).then(res => {
							if (res.data.code == 200) {
								console.log(res.data.data)
								this.$u.msg('已分拣')
								uni.$emit('isRefresh', {
									msg: this.oIndex
								})
								if (!this.isScan) {
									this.$u.back(1, 1000)
								} else {
									setTimeout(() => {
										this.$u.to('order', 'switchTab')
									}, 1000)
								}
							} else {
								this.$u.msg(res.data.msg)
							}
						})
					}
				})
			},
			cleanNow() { //清洗
				if (!this.cleanRemark) {
					this.$u.msg('请填写备注！')
					return;
				}
				if (this.needPploadedImgs.length < 1) {
					this.$u.msg('请选择清洗图片')
					return;
				}
				if (this.sackNum) {
					this.$u.showModal('温馨提示', '确认清洗完成吗？', (res) => {
						if (res) {
							this.$refs.uploadimgcom2.upload();
						}
					})
				} else {
					this.$u.showModal('温馨提示', '确认扫码完成清洗吗？', (res) => {
						if (res) {
							var windowHref = window.location.href;
							//扫码
							this.$http.get('/api/wx/parameter?url=' + encodeURIComponent(window.location.href
								.split('#')[0])).then(
								res3 => {
									console.log(res3)
									wx.config({
										debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
										appId: res3.data.data.appid, // 必填，公众号的唯一标识
										timestamp: res3.data.data.timestamp, // 必填，生成签名的时间戳
										nonceStr: res3.data.data.nonceStr, // 必填，生成签名的随机串
										signature: res3.data.data.signature, // 必填，签名
										jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
									});
									wx.ready(() => {
										wx.scanQRCode({
											needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
											scanType: ["qrCode",
												"barCode"
											], // 可以指定扫二维码还是一维码，默认二者都有
											success: (res) => {
												var result = res
													.resultStr; // 当needResult 为 1 时，扫码返回的结果
												var pastResult = result.split(',').length >
													1 ? result.split(',')[1] : result
												this.sackNum = pastResult
												this.$refs.uploadimgcom2.upload();
											}
										});
									});
								})
						}
					})

				}

			},
			goToNow() { //配送
				this.$u.showModal('温馨提示', '确认开始配送吗？', (res) => {
					if (res) {
						this.$http.post('/api/worker/delivery', {
							orderNo: this.orderNo //订单编号
						}).then(res => {
							if (res.data.code == 200) {
								console.log(res.data.data)
								this.$u.msg('已开始配送')
								uni.$emit('isRefresh', {
									msg: this.oIndex
								})
								if (!this.isScan) {
									this.$u.back(1, 1000)
								} else {
									setTimeout(() => {
										this.$u.to('order', 'switchTab')
									}, 1000)
								}
							} else {
								this.$u.msg(res.data.msg)
							}
						})
					}
				})
			},
			goFinishToNow() { //完成配送
				this.$u.showModal('温馨提示', '确认送回了吗？', (res) => {
					if (res) {
						if (this.needPploadedImgs.length) {
							this.$refs.uploadimgcom1.upload();
						} else {
							this.finishAfter(this.orderNo, this.deliverRemark, '')
						}
					}
				})
			},
			finishAfter(orderNo, deliverRemark, deliverImg) {
				this.$http.post('/api/worker/complate', {
					orderNo: this.orderNo ,//订单编号
					deliverRemark,
					deliverImg
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data)
						this.$u.msg('已完成订单')
						uni.$emit('isRefresh', {
							msg: this.oIndex
						})
						if (!this.isScan) {
							this.$u.back(1, 1000)
						} else {
							setTimeout(() => {
								this.$u.to('order', 'switchTab')
							}, 1000)
						}
					} else {
						this.$u.msg(res.data.msg)
					}
				})
			},
			// 图片上传完毕执行 uploaded 函数
			uploaded: function(uploadedImgs) {
				console.log('图片上传完毕，开始提交数据');
				console.log(uploadedImgs);
				// 组合数据给后端 api 提交
				// 至此数据以及收集完毕
				// 请自己完成数据提交工作
				let arr = []
				for (var i = 0; i < uploadedImgs.length; i++) {
					arr.push(uploadedImgs[i].url)
				}
				if (this.dataObj.orderStatus === 0) {
					this.recycleAfter(this.orderNo, this.receiveRemark, arr.join())
				}
				if (this.dataObj.orderStatus === 2) {
					this.cleanAfter(this.orderNo, this.cleanRemark, arr.join(), this.sackNum)
				}
				if (this.dataObj.orderStatus === 4) {
					this.finishAfter(this.orderNo, this.deliverRemark, arr.join())
				}
			},
			recycleAfter(orderNo, receiveRemark, receiveImg) {
				this.$http.post('/api/worker/recycle', {
					orderNo, //订单编号
					receiveRemark, //回收备注
					receiveImg //回收图片
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data)
						this.$u.msg('已揽收')
						uni.$emit('isRefresh', {
							msg: this.oIndex
						})
						if (!this.isScan) {
							this.$u.back(1, 1000)
						} else {
							setTimeout(() => {
								this.$u.to('order', 'switchTab')
							}, 1000)
						}
					} else {
						this.$u.msg(res.data.msg)
					}
				})
			},
			cleanAfter(orderNo, cleanRemark, cleanImg, sackNum) {
				this.$http.post('/api/worker/clean', {
					orderNo, //订单编号
					cleanRemark, //清洗备注
					cleanImg, //清洗图片
					sackNum
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data)
						this.$u.msg('已完成清洗')
						uni.$emit('isRefreshClean', {
							msg: this.oIndex
						})
						if (!this.isScan) {
							this.$u.back(1, 1000)
						} else {
							setTimeout(() => {
								this.$u.to('order', 'switchTab')
							}, 1000)
						}
					} else {
						this.sackNum = ''
						this.$u.msg(res.data.msg)
					}
				})
			},
			getDetail() {
				let form = {}
				if (this.sackNum) {
					form.sackNum = this.sackNum
				} else {
					form.orderNo = this.orderNo
				}
				this.$http.get('/api/worker/detail', form).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data)
						this.dataObj = res.data.data
						this.dataObj.orderTimelineList = JSON.parse(this.dataObj.orderTimeline).reverse()
						this.bagList = res.data.data.sackNum
						this.orderNo = res.data.data.orderNo
					} else {
						this.$u.msg(res.data.msg)
					}
				})
			},
			getCommon() { //通用参数列表 类型 材质 工作区域
				this.$http.get('/api/common/dict/shoe').then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data)
						/* this.typeList = res.data.data.typeList
						this.materialList = res.data.data.materialList */
						this.placeList = res.data.data.wrokList
					} else {
						this.$u.msg(res.data.msg)
					}
				})
			},
			changePlace() { //选择工作区域弹窗
				this.$refs.guipopup3.open();
			},
			changePlaceBox(item) { //区域选择
				if (this.placeIds.includes(item.dictValue)) {
					this.placeIds.splice(this.placeIds.indexOf(item.dictValue), 1)
					this.placeNames.splice(this.placeNames.indexOf(item.dictLabel), 1)
				} else {
					this.placeIds.push(item.dictValue)
					this.placeNames.push(item.dictLabel)
				}
			},
			closeNow() { //监听关闭
				this.placeIds = this.placeCheckList.slice()
				this.placeNames = this.placeCheckName.slice()
			},
			comfirmPlace() { //提交区域弹窗
				this.placeCheckList = this.placeIds.slice()
				this.placeCheckName = this.placeNames.slice()
				this.$refs.guipopup3.close();
			},
			canclePlace() { //关闭区域弹窗
				this.$refs.guipopup3.close();
			},
			// 记录选择图片时的待提交数据
			changeImg: function(e) {
				this.needPploadedImgs = e;
			},
			previewImg(img, index) {
				let arr = img.split(',')
				uni.previewImage({
					urls: arr,
					current: index
				})
			},
			changeProcess() { //顶部订单状态查看更多i
				this.isProcess = !this.isProcess
			},
			changeIndex(index) { //每个鞋子查看收起
				this.currentIndex = this.currentIndex == index ? -1 : index
			},
		}
	}
</script>

<style lang="less">
	.serviceBox {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 32rpx;

		.item_list {
			width: 300rpx;
			border-radius: 10rpx;
			background: #fff;
			margin-bottom: 25rpx;
			box-shadow: 0rpx 3rpx 10rpx 2rpx rgba(0, 0, 0, .16);
			border: 1px solid transparent;

			.mainImg {
				width: 100%;
				height: 320rpx;
				border-radius: 10rpx 10rpx 0 0;
			}

			.info {
				padding: 20rpx 15rpx 25rpx 15rpx;

				.info_title {
					font-size: 26rpx;
				}

				.info_price {
					margin-top: 10rpx;
					font-weight: 700;

					.new_price {
						font-size: 28rpx;
						color: #EC7100;

						text {
							font-size: 20rpx
						}
					}

					.price {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 20rpx;

						.old {
							font-size: 26rpx;
							color: #999;
						}

						.gui-icons {
							font-size: 32rpx;
						}

						.checkYes {
							color: #2B2B2B;
						}

						.checkNo {
							color: #707070;
						}
					}


				}
			}
		}
	}

	.box-module {
		background: #fff;

		.btnList {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			box-sizing: border-box;
			padding: 20rpx 30rpx;

			.saveBtn {
				width: 100rpx;
				height: 50rpx;
				border-radius: 10rpx;
				margin: 0;
				font-size: 28rpx;
				font-weight: 100;
				color: #fff;
				font-weight: 700;
				border: 1px solid #01A784;
			}

			.cancleBtn {
				background: #fff;
				border: 1px solid #666;
				color: #333;
			}
		}

		.placeList_scroll {
			height: 500rpx;

			.placeList {
				box-sizing: border-box;
				padding: 10rpx 30rpx;

				.item {
					padding: 25rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.gui-icons {
						margin-left: 20rpx;
						font-size: 32rpx;
					}

					.checkYes {
						color: #477EFF;
					}

					.checkNo {
						color: #707070;
					}
				}
			}
		}
	}

	.module {
		padding: 32rpx;
	}

	.process {
		border-radius: 10rpx;
		background: #fff;
		box-shadow: 0rpx 3rpx 10rpx 2rpx rgba(0, 0, 0, .16);
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		overflow: hidden;
		box-sizing: border-box;
		margin-bottom: 32rpx;

		.timeLine {
			flex: 1;

			.item {
				padding: 0 32rpx;

				.title {
					display: flex;
					align-items: center;
					padding-left: 44rpx;
					position: relative;

					.dot {
						width: 24rpx;
						height: 24rpx;
						border-radius: 50%;
						background: #fff;
						border: 1px solid #FF4600;
						position: absolute;
						left: -12rpx;
					}

					.dotCheck {
						width: 24rpx;
						height: 24rpx;
						border-radius: 50%;
						background: #FF4600;
						border: 1px solid #FF4600;
						position: absolute;
						left: -12rpx;
					}

					.title_text {
						font-size: 32rpx;
						font-weight: 700;
						color: #FF4600;
						margin-right: 20rpx;
					}

					.time {
						font-size: 24rpx;
						color: #9D9D9D;
					}
				}

				.content {
					padding: 15rpx 0 45rpx 44rpx;
					font-size: 24rpx;
					color: #9D9D9D;
					border-left: 1px dashed #FF4600;
				}

				&:last-child {
					.content {
						padding-bottom: 0;
						border-color: #fff;
					}
				}
			}
		}

		.toolBtn {
			color: #FF4600;
		}
	}

	.address {
		border-radius: 10rpx;
		background: #fff;
		box-shadow: 0rpx 3rpx 10rpx 2rpx rgba(0, 0, 0, .16);
		padding: 32rpx;
		margin-bottom: 20rpx;

		.icon {
			width: 45rpx;
			margin-right: 30rpx;
		}

		.info {
			.top {
				margin-bottom: 12rpx;

				.name {
					margin-right: 20rpx;
				}
			}
		}

	}

	.product {
		.product_info {
			padding-top: 32rpx;
			background: #fff;
			border-radius: 10rpx;
			box-shadow: 0rpx 3rpx 10rpx 2rpx rgba(0, 0, 0, .16);
			margin-bottom: 25rpx;

			.item {
				padding: 0 32rpx;

				.title {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-weight: 700;
				}

				.info {
					display: flex;
					justify-content: space-between;
					margin-top: 32rpx;

					.mainImg {
						position: relative;

						image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 10rpx;
						}

						.statusBox {
							position: absolute;
							left: 0;
							top: 0;
							font-size: 21rpx;
							font-weight: 600;
							background: #01A784;
							color: #fff;
							padding: 6rpx 9rpx;
							border-radius: 10rpx 0 20rpx 0;
						}
					}

					.middle {
						flex: 1;
						margin: 0 32rpx;
						display: flex;
						flex-direction: column;

						.title {
							font-size: 28rpx;
							font-weight: 700;
							margin-bottom: 10rpx;
						}

						.desc {
							color: #ACACAC;
							font-size: 24rpx;
							margin-bottom: 6rpx;
						}
					}

					.price {
						font-size: 28rpx;
						font-weight: 700;
					}
				}

				.payMoney {
					display: flex;
					justify-content: flex-end;
					padding: 32rpx 0 20rpx 0;
					font-size: 28rpx;
					font-weight: 700;
				}
			}

			.saveBtn {
				margin: 0;
				margin-top: 30rpx;
				background: linear-gradient(89deg, #2B2B2B 0%, #2B2B2B 100%);
				box-shadow: 0px 0px 10rpx 1rpx rgba(0, 0, 0, 0.1500);
				border-radius: 0 0 12rpx 12rpx;
				position: relative;

				&::before {
					content: '';
					width: 0rpx;
					height: 0rpx;
					border-top: 10rpx solid transparent;
					border-bottom: 10rpx solid transparent;
					border-right: 10rpx solid #2B2B2B;
					position: absolute;
					top: -10rpx;
					right: 0rpx;
				}

				&::after {
					content: '';
					width: 0rpx;
					height: 0rpx;
					border-top: 10rpx solid transparent;
					border-bottom: 10rpx solid transparent;
					border-left: 10rpx solid #2B2B2B;
					position: absolute;
					top: -10rpx;
					left: 0rpx;
				}
			}
		}


	}

	.product_moreInfo {
		padding: 32rpx;
		background: #fff;
		border-radius: 10rpx;
		box-shadow: 0rpx 3rpx 10rpx 2rpx rgba(0, 0, 0, .16);
		margin-bottom: 25rpx;

		.fenpei {
			font-size: 32rpx;
			font-weight: 700;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			view {
				display: flex;
				flex-direction: column;

				text {
					margin-bottom: 10rpx;
				}
			}
		}

		.title {
			font-size: 32rpx;
			font-weight: 700;
		}

		.shoe_type {
			padding: 20rpx 0;
			color: #707070;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12rpx;

			.label {
				color: #333;
				font-size: 32rpx;
			}
		}

		.serve_type {
			display: flex;
			align-items: center;
			margin: 32rpx 0;
			font-size: 30rpx;

			.item_type {
				display: flex;
				align-items: center;
				margin-right: 47rpx;

				.label {}

				.gui-icons {
					color: #477EFF;
					margin-left: 20rpx;
				}
			}
		}

		.textArea {
			padding: 32rpx;
			background: #F5F5F5;
			border-radius: 8rpx;
			margin: 32rpx 0;
			min-height: 180rpx;

			textarea {
				width: 100%;
				height: auto;
				min-height: 180rpx;
			}
		}

		.imgList {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 32rpx;
			margin-bottom: 22rpx;

			.item {
				margin-bottom: 10rpx;
				margin-right: 26rpx;

				image {
					width: 190rpx;
					height: 190rpx;
					border-radius: 10rpx;
				}

				&:nth-of-type(3n) {
					margin-right: 0;
				}
			}
		}
	}

	.bottom_tool {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 32rpx;
		font-size: 32rpx;
		font-weight: 700;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		z-index: 99;
		box-shadow: 0rpx 3rpx 10rpx 2rpx rgba(0, 0, 0, .16);
		box-sizing: border-box;

		.titleType {}

		.right {
			display: flex;
			align-items: center;

			.money {
				color: #FF4600;
				margin-right: 60rpx;
			}

			.saveBtn {
				width: 160rpx;
				margin: 0;
				height: 64rpx;
				background-image: linear-gradient(to bottom, #2B2B2B, #2B2B2B);
			}
		}
	}

	.title_qishou {
		padding: 12rpx 0 32rpx 0;
		font-size: 32rpx;
		font-weight: 700;

		text {
			color: #ff0000;
			padding-left: 10rpx;
		}
	}

	.bagModule {
		.bagList {
			.item {
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				border-bottom: 1px solid #f6f7f8;

				.gui-icons {
					color: #ff0000;
				}

				&:last-child {
					border: none;
				}
			}
		}

		.bagBtnList {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.saveBtn {
				margin: 0;
				margin-top: 25rpx;
				width: 240rpx;
				border: 1px solid #2B2B2B;
				height: 75rpx;
			}

			.addBag {
				background: #fff;
				color: #2B2B2B;
			}
		}
	}

	.sale {
		border-radius: 10rpx;
		background: #fff;
		box-shadow: 0rpx 3rpx 10rpx 2rpx rgba(0, 0, 0, .16);
		padding: 32rpx;
		margin-bottom: 32rpx;

		.title {
			font-size: 32rpx;
			font-weight: 700;
			margin-bottom: 12rpx;
		}

		.item {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
			margin-bottom: 32rpx;
			border-bottom: 1px solid #D1D1D1;
			color: #707070;

			.label {
				font-size: 32rpx;
				color: #333;
			}

			&:last-child {
				border: none;
				margin-bottom: 0;
			}

			.money {
				color: #ff0000;
			}
		}
	}
</style>